<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div class="k-title">设备总览</div>
    </template>

    <el-row :gutter="20" class="item-list">
      <el-col
        v-for="item in info"
        :key="item.prop"
        :span="8"
        class="item-card"
        :xs="12"
      >
        <div>
          <img :src="item.icon" alt="" />
          <div class="flex-1">
            <div class="font-bold" style="font-size: 20px">
              {{ props.data[item.prop] || 0 }}
            </div>
            <div>{{ item.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script lang="ts" setup>
// 图标
import icon1 from "@/assets/board/icon1.png";
import icon2 from "@/assets/board/icon2.png";
import icon3 from "@/assets/board/icon3.png";
import icon4 from "@/assets/board/icon4.png";
import icon5 from "@/assets/board/icon5.png";
import icon6 from "@/assets/board/icon6.png";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});
const info = [
  { label: "设备总数", prop: "totalCount", icon: icon1 },
  {
    label: "在线数量",
    prop: "onlineDeviceCount",
    icon: icon2
  },
  {
    label: "离线数量",
    prop: "offlineDeviceCount",
    icon: icon3
  },
  { label: "在库工具", prop: "inStockCount", icon: icon4 },
  {
    label: "在位工具",
    prop: "inCabinetCount",
    icon: icon5
  },
  { label: "门禁报警次数", prop: "warnCount", icon: icon6 }
];
</script>

<style lang="scss" scoped>
.item-card {
  font-size: 12px;
  color: #999999;
  box-sizing: border-box;
  & > div {
    background: #f3f4fb;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    white-space: nowrap;
    .font-bold {
      color: #000;
    }
  }
  img {
    width: 25px;
    margin-right: 8px;
  }
}
</style>
